<?php

class game_view
{
	public function ShowBoard() 
	{
            require_once(GAME_TABLE_FILE);
            // save Players NickName(GLOBAL) and show it only once (in game_view->show game)
            
            $Player1_Nick = UserController::getUserNickname();
            $Player1_Avater = UserController::getUserAvatar();
            
            $Player2_info = GameTable::getOpponentNickAndAvatar();
            $Player2_Nick   = $Player2_info[0];
            $Player2_Avater = $Player2_info[1];
            ?>

    <div class = "GameScreen" >
        <!-- game avatars + waiting animation -->
        <table width="100%" > 
            <tr>
                <td class="Player1">
                    <table>
                        <tr>
                            <td><img src="images/avatars/<?php echo $Player1_Avater;  ?>.png" height="30" width="30"></td>
                            <td><?php  echo $Player1_Nick ; ?></td>
                        </tr>
                    </table>
                </td>
		<td align="center">
			<!-- <img id="imgWaiting" src="images/game/waiting.gif"></img> -->
			<div id="divTopMSG"></div>
		</td>
                <td class="Player2">
                    <table>
                        <tr>
                            <td><img src="images/avatars/<?php echo $Player2_Avater;  ?>.png" height="30" width="30"></td>
                            <td><?php  echo $Player2_Nick ; ?></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <!-- P 1 + 2 Boards -->
        <table class="PlayersTable" width="100%" class="game">
                <tr>
                    <td class="TowerRow">
                        <table class="TowersTable">
                            <?php
			    	/*
					<!-- p1_tower_0_txt/img -->
					<!-- p1_tower_1_txt/img -->
					<!-- p1_tower_2_txt/img -->
					<!-- p1_tower_3_txt/img -->				
				*/
                                for($i=0 ; $i<4 ; $i++) {
				echo '<tr>';
				echo 	'<td id="p1_tower_' . $i . '" width="100">';
				echo 		'<span id="p1_tower_' . $i . '_txt"></span>';
				echo 		'<br>';
				echo 		'<span id="p1_tower_' . $i . '_img"></span>';
				echo 	'</td>';
				echo '</tr>';
                                }
                            ?>
                        </table>
                    </td>
                    <td id="Player1_Board" class="Player1_Board">
                    <table class="PlayerBoard">
                    <?php
		    	/*
			<!-- p1_board_00 p1_board_01 p1_board_02-->
			<!-- p1_board_10 p1_board_11 p1_board_12-->
			<!-- p1_board_20 p1_board_21 p1_board_22-->
			<!-- p1_board_30 p1_board_31 p1_board_32-->			
			*/
			for($i=0 ; $i<4 ; $i++) {
				echo '<tr width="240">';
				for($j=0 ; $j<3 ; $j++) {
					echo '<td id="p1_board_'.$i.$j.'" class="SoldierCell" onclick="CellClick(' . $i .  ',' . $j . ');" >';
                                        echo '<span id="p1_board_' . $i.$j . '_txt"></span><br><span id="p1_board_' . $i.$j . '_img_span"></td>';
				}
				echo '</tr>';
			}
                    ?>
                    </table>
                </td>
                <td class="GameMessageCell" id="GameMessageCell">
                    <div id="GameMessage"></div>
                </td>
                <td class="Player2_Board" id="Player2_Board">
                    <table class="PlayerBoard">
                        <?php
				/*
			<!-- p2_board_00 p2_board_01 p2_board_02-->
			<!-- p2_board_10 p2_board_11 p2_board_12-->
			<!-- p2_board_20 p2_board_21 p2_board_22-->
			<!-- p2_board_30 p2_board_31 p2_board_32-->			
				*/
     			for($i=0 ; $i<4 ; $i++) {
				echo '<tr width="240">';
				for($j=0 ; $j<3 ; $j++) {
					echo '<td id="p2_board_'.$i.$j.'" class="SoldierCell">';
                                        echo '<span id="p2_board_' . $i.$j . '_txt"></span><br><span id="p2_board_' . $i.$j . '_img_span"></td>';
				}
				echo '</tr>';
			}
                        ?>
                    </table>
                </td>
                <td class="TowerRow">
                    <table class="TowersTable">
                        <?php
			/*
			<!-- p2_tower_0_txt/img -->
			<!-- p2_tower_1_txt/img -->
			<!-- p2_tower_2_txt/img -->
			<!-- p2_tower_3_txt/img -->			
			*/
                            for($i=0 ; $i<4 ; $i++) {
				echo '<tr>';
				echo 	'<td id="p2_tower_' . $i . '" width="100">';
				echo 		'<span id="p2_tower_' . $i . '_txt"></span>';
				echo 		'<br>';
				echo 		'<span id="p2_tower_' . $i . '_img"></span>';
				echo 	'</td>';
				echo '</tr>';
                            }
                        ?>
                    </table>
                </td>
            </tr>
        </table>
        <!-- Bottom Table -->
        <table width="100%" draggable="false">
            <tr>
                <td align="left">
                    <!-- Player Cards -->
                    <table class="cards" draggable="true">
                        <tr>
                            <td id="card0" border="0" width="80" height="100" ></td>
                            <td id="card1" border="0" width="80" height="100" ></td>
                            <td id="card2" border="0" width="80" height="100" ></td>
                            <td id="card3" border="0" width="80" height="100" ></td>
                            <td id="card4" border="0" width="80" height="100" ></td>
                        </tr>
                        <tr align="center">
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                        </tr>
                    </table>
                    <table>
                        <tr>
                            <td>Command: </td>
                            <td><input type="text" id="txtCommand"></td>
                            <td><input type="button" id="btnSendCommand" value="Send Command" onclick="javascript:SubmitClicked();"/></td>
                            <td><img src="images/game/q_btn.png" alt="?" onMouseOver="ShowPopup(this,'commands_popup',20,20);" onMouseOut="HidePopup('commands_popup');"/></td>
                        </tr>
                    </table>
                    
                </td>
 		<td valign="top">
                    <!-- control buttons -->
                    <table>
                        <tr>
                            <td>
                                <input type="image" src="images/game/btn/draw.jpg" alt="Draw Card" id="btnDrawCard" title="Draw card next turn" onclick="javascript:DrawCardClicked();"/>
                                
                            </td>
                            <td>
                                <input type="image" src="images/game/btn/surrender.jpg" id="btnForfeit" alt="Surrender" title="Surrender" onclick="javascript:SurrenderClicked();"/>
                            </td>                            
                        </tr>
                        <tr>
                            <td>
                                <input type="image" src="images/game/btn/restart.jpg" alt="Clean Move" title="Restart Move" id="btnRestart" onclick="javascript:RestartClicked();"/>
                            </td>
                            <td>
                                <input type="image" src="images/game/btn/go.jpg" alt="Submit" id="btnSubmit" title="Submit your move!" onclick="javascript:GoClicked();"/>
                            </td>
                        </tr>                        
                    </table>
                </td>
                <td valign="top" width="100">
                    <!-- chat -->
                    <table class="chatBox" disable="true" >
                        <tr>
                            <td class="chatTitle">
                                <label id="aboutHeading">Chat</label>
                            </td>
                        </tr>
                        <tr>
                            <td class="chatRow">
                                <textarea readonly cols="30" rows="5"  id="ChatOutput" name="ChatOutput"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td class="chatRow">
                                <input type="text" id="ChatInput" maxlength="40" size="28">
                                <input type="button" id="btnSendMSG" value="Send" onclick="javascript:ChatClick();"/> 
                            </td>
                        </tr>
                    </table>
		</td>
            </tr>
    </table>
    </div>

    <!-- pop ups -->
    <div id="commands_popup" class="commands_popup_style">
        <table>
            <tr><td class="Title">Commands List</td></tr>
            <tr>
                <td>
                    <table>
                        <tr>
                            <td>drw</td><td>draw card next turn</td></tr>
                            <td>plc a x y</td><td>place card:<br/>
                                a - card index in deck<br/>
                                x,y - place in position x,y<br/></td></tr>
                            <td>atk x y</td><td>attack with soldier in position x,y</td></tr>
                            <td>fft</td><td>Surrender (forfeit)</td></tr>
                        </tr>
                    </table>
                    To execute 2 commands on one turn,<br/>separate the commands with "|" 
        </table>
    </div>
    <div id="card001_popup" class="card_popup_style">
        <img src="images/game/cards/001.jpg"/>
    </div>    
    <div id="card002_popup" class="card_popup_style">
        <img src="images/game/cards/002.jpg"/>
    </div>    
    <div id="card003_popup" class="card_popup_style">
        <img src="images/game/cards/003.jpg"/>
    </div>     
    <div id="draged_card_popup" class="card_popup_style">

    </div>       
    
            <?php
	}

} 